<!doctype html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>新主页</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit"/>

    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="icon" type="image/png" href="./assets/i/favicon.png">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes"/>
    <link rel="icon" sizes="192x192" href="./assets/i/app-icon72x72@2x.png"/>

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" href="./assets/i/app-icon72x72@2x.png"/>

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="./assets/i/app-icon72x72@2x.png"/>
    <meta name="msapplication-TileColor" content="#0e90d2"/>

    <link rel="stylesheet" href="./assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="./assets/css/app.css"/>
    <script src="js/vue.js"></script>

    <!--    弹框    -->
    <link rel="stylesheet" type="text/css" href="./swal/sweetalert2.min.css">
    <script src="./swal/sweetalert2.min.js"></script>
    <!-- for IE support -->
    <script src="./swal/promise.min.js"></script>

</head>
<style>
    body {
        font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;
        background: #f7f7f7;
    }

    .lhl-background {
        background: url(img/background.jpg) no-repeat top center;
        background-color: #c0e4da;
        min-height: 1200px;
    }

    .lhl-div-padding {
        padding: 15px;
    }

    .lhl-div-margin {
        margin: 10px;
    }

    .lhl-div-card {
        background: #fff;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
        padding-top: 60px;
        font-size: 15px;
    }

    .lhl-div-background-urlset {
        background-repeat: no-repeat no-repeat;
        background-size: 100% auto;
        background-position: center;
    }

    .lhl-text-mini {
        font-size: 15px;
        color: #919191;
    }

    .lhl-border-right {
        border-right: 1px solid #ddd;
    }

    .lhl-margin-top {
        margin-top: 10px;
    }

    .lhl-div-inline {
        display: inline;
    }

    .lhl-fixed {
        position: fixed;
    }

    .lhl-text-shadow {
        text-shadow: black 0.1em 0.1em 0.2em;
    }

    .usermsb-box {
        overflow: hidden;
        float: right;
        margin-right: 100px;
        margin-bottom: 100px;
        width: 300px;
        height: 300px;
        background: white;
        border: 1px solid #eee;
        border-radius: 5px;
    }

    .usermsb-box .user-wraper {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .usermsb-box .user-wraper .user-img {
        position: absolute;
        top: 30px;
        left: 50%;
        margin-left: -45px;
        width: 90px;
        height: 90px;
        border-radius: 100%;
        overflow: hidden;
    }

    .usermsb-box .user-wraper .user-img img {
        width: 100%;
        height: 100%;
    }

    .usermsb-box .user-wraper .user-msg {
        width: 100%;
        height: 100px;
        position: absolute;
        top: 140px;
        background: #fff;
        text-align: center;
    }

    .usermsb-box .user-wraper .user-msg h3 {
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        margin: 0 5px;
        padding: 7px;
    }

    .usermsb-box .user-wraper .user-msg h3 span {
        margin-left: 5px;
        padding-bottom: 15px;
        font-size: 13px;
        line-height: 30px;
        color: #666;
    }

    .usermsb-box .user-wraper .user-msg span {
        margin-top: 15px;
        font-size: 13px;
        color: #999;
    }

    .usermsb-box .user-wraper .user-btn {
        position: absolute;
        left: 50%;
        bottom: 40px;
        margin-left: -75px;
        width: 150px;
        height: 35px;
    }

    .usermsb-box .user-wraper .user-btn .btn {
        width: 100%;
        height: 100%;
        background: #0984e3;
        border: none;
        outline: none;
        color: white;
        font-weight: bold;
        font-size: 14px;
        border-radius: 5px;
    }

    .usermsb-box .user-wraper .user-btn .btn:active {
        background: #74b9ff;
    }

    .content-wraper {
        position: relative;
        top: -10px;
        left: 50%;
        margin-top: 60px;
        margin-left: -500px;
        width: 800px;
        overflow: hidden;
    }

    .content-wraper .content-item {
        border: 1px solid #eee;
        margin: 20px;
        border-radius: 5px;
    }

    .content-wraper .content-item .item-head .head-img {
        margin: 5px 15px;
    }

    .content-wraper .content-item .item-head .head-msg {
        display: inline-block;
        float: left;
        height: 50px;
        margin-top: 12px;
    }

    .content-wraper .content-item .item-head .head-msg .msg-name {
        font-size: 15px;
    }

    .content-wraper .content-item .item-head .head-msg .msg-data {
        font-size: 13px;
        color: #666;
    }

    .content-wraper .content-item .content-text {
        margin: 10px 20px;
        min-height: 10px;
        padding: 10px 0;
    }

    .content-wraper .content-item .content-img {
        margin-left: 20px;
        margin-top: -20px;
    }

    .content-wraper .content-item .content-img img {
        width: 120px;
        height: 110px;
        margin-right: 10px;
    }

    .content-wraper .content-item .content-list {
        width: 100%;
    }

    .content-wraper .content-item .content-list .list-item {
        cursor: pointer;
        display: flex;
        justify-content: center;
        width: 50%;
        height: 40px;
        margin-top: 10px;
        transition: all .3s ease;
        overflow: hidden;
    }

    .content-wraper .content-item .content-list .list-item:hover {
        background: #ecf0f1;
    }

    .content-wraper .content-item .content-list .list-item a {
        line-height: 40px;
        text-align: center;
    }

    .content-wraper .content-item .content-pl {
        width: 100%;
    }

    .content-wraper .content-item .content-pl .pl-load {
        cursor: pointer;
        line-height: 20px;
        margin: -7px 0 10px 10px;
    }

    .content-wraper .content-item .content-pl .pl-inner {
        margin: 5px 30px;
    }
    .am-slides li img{
        height: 200px;
    }
</style>

<body>
<div id="app">
    <header class="am-topbar am-topbar-inverse am-topbar-fixed-top" style="padding-left: 40px;padding-right: 40px;">
        <h1 class="am-topbar-brand">
            <p>Tweets</p>
        </h1>
        <div>
            <div class="am-topbar-right">
                <a href="./userlogin" class="am-btn am-btn-primary am-topbar-btn am-btn-sm am-round">
                    <i class="am-icon-refresh"></i> 切换账户
                </a>
                <a href="./userinfo" class="am-btn am-topbar-btn am-btn-primary am-btn-sm am-round">
                    <i class="am-icon-cloud"></i> 个人信息
                </a>
            </div>
        </div>
    </header>
    <div class="am-g" style="display: none;">
        <div class="am-u-lg-8 am-u-lg-offset-2">
            <div data-am-widget="slider" class="am-slider am-slider-c3" data-am-slider='{&quot;controlNav&quot;:false}' >
                <ul class="am-slides">
                    <li>
                        <img src="http://s.amazeui.org/media/i/demos/bing-1.jpg">
                        <div class="am-slider-desc"><div class="am-slider-counter"><span class="am-active">1</span>/4</div>远方 有一个地方 那里种有我们的梦想</div>

                    </li>
                    <li>
                        <img src="http://s.amazeui.org/media/i/demos/bing-2.jpg">
                        <div class="am-slider-desc"><div class="am-slider-counter"><span class="am-active">2</span>/4</div>某天 也许会相遇 相遇在这个好地方</div>

                    </li>
                    <li>
                        <img src="http://s.amazeui.org/media/i/demos/bing-3.jpg">
                        <div class="am-slider-desc"><div class="am-slider-counter"><span class="am-active">3</span>/4</div>不要太担心 只因为我相信 终会走过这条遥远的道路</div>

                    </li>
                    <li>
                        <img src="http://s.amazeui.org/media/i/demos/bing-4.jpg">
                        <div class="am-slider-desc"><div class="am-slider-counter"><span class="am-active">4</span>/4</div>OH PARA PARADISE 是否那么重要 你是否那么地遥远</div>

                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="am-g">

    </div>
    <!-- 个人信息栏 -->
    <div class="usermsb-box">
        <div class="user-wraper">
            <div class="user-img">
                <!-- 个人头像 -->
                <img height="100px" width="100px" v-bind:src="UserInfo.UserHead"/>
            </div>
            <div class="user-msg">
                <!-- 用户名 -->
                <h3>
                    {{UserInfo.UserName}}
                    <span>{{UserInfo.Sex}}</span>
                </h3>
                <span>签名:{{UserInfo.Simple}}</span>
            </div>
            <div class="user-btn">
                <!-- 用户按钮组 -->
                <button class="btn"
                        data-am-modal="{target: '#modal-sendtweet', closeViaDimmer: 0, width: 400, height: 300}">发推文
                </button>
            </div>
            <div class="lhl-div-card lhl-div-padding">
                <ul class="am-avg-sm-2" style="text-align: center;cursor: pointer;">
                    <li class="lhl-border-right">
                        <span>{{UserInfo.TweetNumber}}</span>
                        <br/>
                        <span class="lhl-text-mini">推文</span>
                    </li>
                    <li>
                        <span>{{UserInfo.PraiseNumber}}</span>
                        <br/>
                        <span class="lhl-text-mini">获赞</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 右部分 -->
    <div class="content-wraper">
        <!-- 推文 -->
        <div class="content-item" v-for="(item,key) in Tweet">
            <!-- 头部信息 -->
            <div class="am-cf item-head">
                <p class="am-align-left head-img">
                    <img v-bind:src="item.user_head" class="img-thumbnail am-radius" height="50px" width="50px"/>
                </p>
                <span class="head-msg">
                    <span class="msg-name">{{item.user_name}}</span>
                    <br/>
                    <span class="msg-data">{{item.createdate}}</span>
                    </span>
            </div>
            <!-- 文字 -->
            <div class=" content-text">
                <p class="am-text-sm">{{item.text}}</p>
            </div>
            <!-- 插图 -->
            <div class="am-cf content-img">
                <img v-if="item.image1!=undefined" v-bind:src="item.image1" @click="BigImgClick(item.image1)"
                     data-am-modal="{target: '#my-modal-bigimg', closeViaDimmer: 0, width: 620}"/>
                <img v-if="item.image2!=undefined" v-bind:src="item.image2" @click="BigImgClick(item.image2)"
                     data-am-modal="{target: '#my-modal-bigimg', closeViaDimmer: 0, width: 620}"/>
                <img v-if="item.image3!=undefined" v-bind:src="item.image3" @click="BigImgClick(item.image3)"
                     data-am-modal="{target: '#my-modal-bigimg', closeViaDimmer: 0, width: 620}"/>
            </div>
            <!-- 点赞评论等 -->
            <ul class="am-avg-lg-2 content-list">
                <li class="list-item" @click="CreatePraise(item.id,key)">
                    <a>
                        <i class="am-icon-thumbs-up"></i>&nbsp;{{item.up}}
                    </a>
                </li>
                <li class="list-item" @click="CreateReply(item.id,key)">
                    <a>
                        <i class="am-icon-comment"></i> 添加评论
                    </a>
                </li>
            </ul>
            <!-- 评论 -->

            <div class=" content-pl">
                <hr data-am-widget="divider" class="am-divider am-divider-default "/>
                <div class="am-text-xs pl-load">

                    <a @click="Loadreply(item.id,key)">加载评论</a>
                </div>
                <div class="am-text-xs pl-inner" v-for="itemr in item.Reply">
                    <span style="font-size: 12px;">{{itemr.username}}:</span>
                    <span style="font-size: 11px;">{{itemr.text}}&nbsp;({{itemr.createdate}})</span>
                </div>

            </div>
        </div>
        <!-- 继续加载按钮 -->
        <div class="content-btn">
            <button class="am-btn am-btn-block am-btn-default" @click="ContinueLoadTweet">继续加载Tweet
            </button>
            <button data-am-smooth-scroll class="am-btn am-btn-block am-btn-warning">
                <i class="am-icon-upload"></i>
                回到顶部
            </button>
        </div>
    </div>
    <!-- =模态框 -->
    <!-- 发推文框 -->
    <div class="am-modal am-modal-no-btn" id="modal-sendtweet">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">
                发Tweet
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div class="am-modal-bd">
                <div class="am-form-group-sm" style="text-align: left;">
                    <label>推文内容</label>
                    <textarea style="width: 100%;" v-model="TweetText"></textarea>
                    <span>选择图片</span>
                    <div class="lhl-div-margin">
                        <img v-bind:src="Inimg.img1" width="40px" height="40px"
                             onclick="document.getElementById('up-image1').click()"/>
                        <img v-bind:src="Inimg.img2" width="40px" height="40px"
                             onclick="document.getElementById('up-image2').click()"/>
                        <img v-bind:src="Inimg.img3" width="40px" height="40px"
                             onclick="document.getElementById('up-image3').click()"/>
                        <input id="up-image1" type="file" accept="image/jpg,image/jpeg,image/png" style="display:none;"
                               @change="ReadImage($event,1)"/>
                        <input id="up-image2" type="file" accept="image/jpg,image/jpeg,image/png" style="display:none;"
                               @change="ReadImage($event,2)"/>
                        <input id="up-image3" type="file" accept="image/jpg,image/jpeg,image/png" style="display:none;"
                               @change="ReadImage($event,3)"/>
                    </div>
                    <button class="am-btn am-btn-block am-btn-primary " @click="SendTweet">发送Tweet</button>
                </div>

            </div>
        </div>
    </div>

    <!-- 加载框 -->
    <div class="am-modal am-modal-loading am-modal-no-btn" id="my-modal-loading">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">加载中...</div>
            <div class="am-modal-bd">
                <span class="am-icon-spinner am-icon-spin"></span>
            </div>
        </div>
    </div>

    <!-- 大图框 -->
    <div class="am-modal am-modal-no-btn " id="my-modal-bigimg">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">
                查看大图
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div class="am-modal-bd">
                <img v-bind:src="BigImg" width="600px"/>
            </div>
        </div>
    </div>
    <!-- alert框 -->
    <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">
                提示
            </div>
            <div class="am-modal-bd">
                {{AlertText}}
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn">确定</span>
            </div>
        </div>
    </div>

    <div class="lhl-fixed" style="right: 10px;bottom: 10px;">
        <i class="am-icon-arrow-up am-icon-btn" data-am-smooth-scroll></i>
    </div>


</div>

</body>
<script src="./js/jquery2.js"></script>
<script src="./assets/js/amazeui.min.js"></script>
<script src="js/index_js.js"></script>

</html>